<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="{__STATIC_PATH__}admin/lib/layui-v2.5.4/css/layui.css" media="all">
    <link rel="stylesheet" href="{__STATIC_PATH__}admin/css/public.css" media="all">
    <style>
        .inoutCls {
            height: 22px;
            line-height: 22px;
            padding: 0 5px;
            font-size: 12px;
            background-color: #1E9FFF;
            max-width: 80px;
            border: none;
            color: #fff;
            margin-left: 10px;
            display: inline-block;
            white-space: nowrap;
            text-align: center;
            border-radius: 2px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <button type="button" class="layui-btn add">添 加</button>
        <div class="layui-form" style="margin-top: 20px;">
        <table class="layui-table">
                <colgroup>
                    <col width="40">
                    <col width="60">
                    <col width="100">
                    <col width="130">
                    <col width="130">
                    <col width="70">
                    <col width="70">
                    <col width="185">
                </colgroup>
                <thead>
                <tr>
                    <th>id</th>
                    <th>规格名</th>
                    <th class="text-center">创建时间</th>
                    <th class="text-center">更新时间</th>
                </tr>
                </thead>
                <tbody>
                <!--一级类目循环-->
                {volist name="specs.data" id="vo"}
                <tr>
                    <td>
                        {$vo.id}

                    </td>
                    <td>
                        {$vo.name}
                    </td>
                    <td>
                        {$vo.create_time}
                    </td>
                    <td>
                        {$vo.update_time}
                    </td>
                </tr>
                {/volist}
                <!--一级类目循环 end-->
                </tbody>
            </table>
        </div>
        <div id="pages"></div>
    </div>

</div>
<script src="{__STATIC_PATH__}admin/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script src="{__STATIC_PATH__}admin/lib/layui-v2.5.4/layui.js" charset="utf-8"></script>
<script src="{__STATIC_PATH__}admin/js/common.js?v5" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use(['form', 'laypage'], function () {
        var form = layui.form
            , laypage = layui.laypage;

        laypage.render({ //分页
            elem: 'pages'
            , count: {$specs['total']}
            , limit: {$specs['per_page']}
            , curr: {$specs['current_page']}
            // , hash: 'page'
            , theme: '#FFB800'
            ,jump: function(obj, first) {
                //obj包含了当前分页的所有参数，比如：
               // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                //console.log(obj.limit); //得到每页显示的条数

                //首次不执行
                if (!first) {
                    //do something
                    window.location.href = '?page='+obj.curr;
                }
            }
        });


        // 添加 分类
        $('.add').on('click', function () {
            layObj.dialog('{:url("admin/specs/add")}','添加规格')
        });

        $('.update-category').on('click', function(){
            let id = $(this).attr('data-id');
            let url = '/admin/category/update?id='+id;
            layObj.dialog(url,'更新分类')
        });

        //监听状态 更改
        form.on('switch(switchStatus)', function (obj) {
            console.log(obj.elem.checked, '改变状态')

            let id = obj.othis.parent().attr('data-id');
            let status = obj.elem.checked ? 1 : 0;
            $.ajax({
                url: '{:url("specs/status")}?id=' + id + '&status=' + status,
                success: (res) => {
                    if (res.status == 0) {
                        layer.msg(res.message);
                    } else {
                        layer.msg(res.message);
                    }
                }
            });
            return false;
        });



    })
</script>
</body>
</html>
